<template>
    <div class="management-less">
        <el-form :inline="true" :model="formInline" class="demo-form-inline t-a-l">
            <el-form-item label="考场号：">
                <el-input v-model="keyWord" placeholder=""></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
                <el-button class="reset" @click="reset()">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="export-less">
            <el-button type="primary" @click="dialogFormVisible = true,title='新增考场',isDisabled = false,clearData()">新增</el-button>
        </div>
        <div class="border-s my-test">
            <el-table :data="tableData" style="width: 100%" :border="false">
                <el-table-column prop="name" label="考场号"></el-table-column>
                <el-table-column prop="address" label="地点"></el-table-column>
                <el-table-column prop="contactPhone" label="联系电话"></el-table-column>
                <el-table-column prop="contactName" label="联系人"></el-table-column>
                <el-table-column prop="totalSeat" label="座位号总数"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="dialogFormVisible = true,title='查看考场信息',isDisabled = true,examineeRoomDataId(scope.row.id)" type="text" size="medium" class="button-my-test">查看</el-button>
                        <el-button @click="dialogFormVisible = true,examineeRoomDataId(scope.row.id),title='修改考场信息',isDisabled = false" type="text" size="medium" class="button-my-test">修改</el-button>
                        <el-button @click="confirm(scope.row.id)" type="text" size="medium" class="button-my-test">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="formInline.pageable.size"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="pageFy"
            :total="total">
            </el-pagination>
        <el-dialog :title="title" :visible.sync="dialogFormVisible" width="30%" center>
            <el-form :model="addRoom">
                <el-form-item label="考场号" label-width="90px">
                    <el-input v-model="addRoom.name" autocomplete="off" :disabled="isDisabled" @input="numInput($event)"></el-input>
                </el-form-item>
                <el-form-item label="地点" label-width="90px">
                    <el-input v-model="addRoom.address" autocomplete="off" :disabled="isDisabled"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" label-width="90px">
                    <el-input v-model="addRoom.contactPhone" autocomplete="off" :disabled="isDisabled"></el-input>
                </el-form-item>
                <el-form-item label="联系人" label-width="90px">
                    <el-input v-model="addRoom.contactName" autocomplete="off" :disabled="isDisabled"></el-input>
                </el-form-item>
                <el-form-item label="座位号总数" label-width="90px">
                    <el-input v-model="addRoom.totalSeat" autocomplete="off" :disabled="isDisabled" @input="numInput1($event)"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false,examineeRoomAdd()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import apiHttp from '../../api/index.js'
export default {
    data(){
        return{
            title:'',
            keyWord:'',
            formInline: {
                conditions:[],
                pageable:{
                    current:1,
                    size:10
                },
            },
            dialogFormVisible:false,
            addRoom:{
                name:'',
                address:'',
                contactPhone:'',
                contactName:'',
                totalSeat:''
            },
            tableData:[],
            isDisabled:false,
            total:0
        }
    },
    mounted(){
        this.examineeRoomList()
    },
    methods:{
        // 重置搜索内容
        reset(){
            this.keyWord = ''
            this.examineeRoomList()
        },
        // 考场号监听
        numInput(e){
            this.addRoom.name = e.replace(/[^\d]/g,'')
            if(e < 1){
                this.addRoom.name = 1
            }else if(e > 99){
                this.addRoom.name = 99
            }
        },
        // 座位号监听
        numInput1(e){
            this.addRoom.totalSeat = e.replace(/[^\d]/g,'')
            if(e < 1){
                this.addRoom.totalSeat = 1
            }else if(e > 999){
                this.addRoom.totalSeat = 99
            }
        },
        // 考场管理列表
        examineeRoomList(){
            apiHttp.apiIndex.examineeRoomPage(this.formInline).then(resp=>{
                if(resp.code == 0){
                    this.tableData = resp.data.records
                    this.total = Number(resp.data.total)
                    this.formInline.conditions = []
                }
            })
        },
        // 新增或者更新考场
        examineeRoomAdd(){
            if(this.title == '新增考场'){
                if(this.addRoom.id){
                    delete this.addRoom.id
                }
            }
            apiHttp.apiIndex.examineeRoomData(this.addRoom).then(resp=>{
                if(resp.code == 0){
                    this.examineeRoomList()
                    this.clearData()
                }
            })
        },
        // 查询单条数据
        examineeRoomDataId(id){
            apiHttp.apiIndex.examineeRoomDataId(id).then(resp=>{
                if(resp.code == 0){
                    this.addRoom.id = id
                    this.addRoom.name = resp.data.name
                    this.addRoom.address = resp.data.address
                    this.addRoom.contactPhone = resp.data.contactPhone
                    this.addRoom.contactName = resp.data.contactName
                    this.addRoom.totalSeat = resp.data.totalSeat
                }
            })
        },
        // 清空数据
        clearData(){
            this.addRoom.name = ''
            this.addRoom.address = ''
            this.addRoom.contactPhone = ''
            this.addRoom.contactName = ''
            this.addRoom.totalSeat = ''
        },
        // 按页码跳转
        handleCurrentChange(val){
            this.formInline.pageable.current = val
            this.examineeRoomList()
        },
        pageFy(val){
            this.formInline.pageable.size = val
            this.examineeRoomList()
        },
        // 搜索
        onSubmit(){
            if(this.keyWord){
                this.formInline.conditions.push({
                    expression:'contain',
                    column:'name',
                    value:this.keyWord
                })
                this.examineeRoomList()
            }else{
                this.formInline.conditions = []
                this.examineeRoomList()
            }
        },
        // 删除
        confirm(id) {
            this.$confirm('您确定要删除吗?', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                center:'true'
            }).then(() => {
                apiHttp.apiIndex.examineeRoomDeleteDataId(id).then(resp=>{
                    if(resp.code == 0){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.examineeRoomList()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消删除'
                });          
            });
      }
    }
}
</script>
<style lang="less">
.management-less{
    .el-form{
        .el-form-item{
            .el-form-item__content{
                .el-button--primary{
                    background-color: #5d2805;
                    border-color: #5d2805;
                }
            }
        }
    }
    .export-less{
        text-align: left;
        margin-bottom: 15px;
        .jiafei{
            display: block;
            margin-top: 15px;
        }
    }
    .el-table th{
        color: #fff;
        background-color: #5d2805;
    }
    .el-table td, .el-table th{
        text-align: center;
        font-size: 16px;
    }
    .rejected{
        .el-dialog__body{
            padding: 10px 25px 10px;
            .el-form-item__label{
                display: none;
            }
            .el-form-item__content{
                margin-left: 0 !important;
            }
        }
        .el-dialog__footer{
            .el-button--primary{
                background-color: #5d2805;
                border-color: #5d2805;
            }
            .el-button--default:hover{
                background-color: #e4d7cf;
                border-color: #e4d7cf;
                color: #5d2805;
            }
        }
    }
}
.el-message-box__message{
    font-size: 18px;
}
</style>

